<template>
    <view class="busin-container">


        <l-input label="公积金贷款金额" class="mt-3" v-model="form.grand" type="digit" maxlength="10"
            placeholder="请输入单价（万元）" />
        <l-input label="商业贷款金额" class="mt-3" v-model="form.amount" type="digit" maxlength="10"
            placeholder="请输入贷款金额（万元）" />

        <l-select label="贷款年限" class="mt-3" @update:modelValue="yearBindPickerChange" :modelValue="yearIndex"
            :list="yearArray" keyName="name">
        </l-select>
        <l-select label="公积金利率" class="mt-3" @update:modelValue="grandBindPickerChange" :modelValue="rateIndex"
            :list="rateList">
        </l-select>

        <view class="dengyu">
            = {{ form.grandRate }} %
        </view>
        <view class="mt-3 flex items-center">
            <u-radio-group v-model="form.rate" placement="row">
                <template v-for="(item, index) in rateArr" :key="index">
                    <u-radio shape="circle" :label="item.name" :name="item.value"></u-radio>
                    &emsp;
                </template>
            </u-radio-group>
        </view>
        <l-select v-if="form.rate === '1'" label="商贷利率" class="mt-3" @update:modelValue="loanBindPickerChange"
            :modelValue="loanIndex" :list="loanList">
        </l-select>

        <view class="flex items-center" v-else>
            <view class="text-nowrap mr-3">
                商贷利率
            </view>
            <view class="border border-gray-300 rounded p-1 flex-1">
                <view class="right-form-rate">
                    <view class="right-form-rate-left">
                        LPR
                    </view>
                    <l-input class="uni-input" @input='LprInput' v-model="form.lpr" type="digit" maxlength="10">
                        <template #suffix>
                            %
                        </template>
                    </l-input>

                </view>
                <view class="right-form-rate">
                    <view class="right-form-rate-left">
                        基点
                    </view>
                    <l-input class="uni-input" @input='pointInput' v-model="form.point" type="digit" maxlength="10">
                        <template #suffix>
                            ‱
                        </template>
                    </l-input>
                </view>
            </view>
        </view>
        <view class="dengyu" v-if="form.rate === '1'">
            = {{ form.rateNum }} %
        </view>
        <view class="dengyu" v-else>
            = {{ form.rateLpr }} %
        </view>
    </view>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            rateList: [{
                value: 1,
                label: "基准利率(3.25%)"
            },
            {
                value: 0.7,
                label: "基准利率7折"
            },
            {
                value: 0.85,
                label: "基准利率85折"
            },
            {
                value: 0.88,
                label: "基准利率88折"
            },
            {
                value: 0.9,
                label: "基准利率9折"
            },
            {
                value: 0.95,
                label: "基准利率95折"
            },
            {
                value: 1.05,
                label: "基准利率1.05倍"
            },
            {
                value: 1.1,
                label: "基准利率1.1倍"
            },
            {
                value: 1.2,
                label: "基准利率1.2倍"
            },
            {
                value: 1.3,
                label: "基准利率1.3倍"
            }
            ],
            loanList: [{
                value: 1,
                label: "基准利率(4.9%)"
            },
            {
                value: 0.7,
                label: "基准利率7折"
            },
            {
                value: 0.85,
                label: "基准利率85折"
            },
            {
                value: 0.88,
                label: "基准利率88折"
            },
            {
                value: 0.9,
                label: "基准利率9折"
            },
            {
                value: 0.95,
                label: "基准利率95折"
            },
            {
                value: 1.05,
                label: "基准利率1.05倍"
            },
            {
                value: 1.1,
                label: "基准利率1.1倍"
            },
            {
                value: 1.2,
                label: "基准利率1.2倍"
            },
            {
                value: 1.3,
                label: "基准利率1.3倍"
            }
            ],
            yearArray: [],
            yearIndex: 19,
            index: 5,
            rateIndex: 0,
            loanIndex: 0,
            amount: 33.4,
            form: {
                // 计算方式
                rate: '1',
                // 公积金贷款金额
                grand: '',
                // 商贷金额
                amount: '',
                // 年限
                years: 240,
                // 公积金基准利率 显示参数
                grandRate: 3.25,
                // 公积金基准利率 
                grandRateShow: 0.0325,
                // 商贷基准利率 显示利率
                rateNum: 0.49,
                // 商贷基准利率
                baseRate: 0.049,
                // lpr显示利率
                rateLpr: 4.65,
                // lpr 利率
                lpr: 4.65,
                // 基点
                point: null,
            },
            rateArr: [{
                value: '1',
                name: '基准利率'
            },
            {
                value: '2',
                name: 'LRP基础利率'
            }
            ],
            current: 0
        }
    },
    watch: {
        form: {
            handler: function (newvalue) {
            },
            deep: true //deep置为true表示：对象中任一属性值发生变化，都会触发handler中的方法
        }
    },
    created() {
        for (let i = 1; i <= 30; i++) {
            this.yearArray.push({
                value: i * 12,
                name: `${i}年`
            })
        }
    },
    onLoad() {

    },
    methods: {
        submit() {
            if (this.ruls()) {
                const obj = {
                    sloanMoney: this.form.amount,
                    gloanMoney: this.form.grand,
                    smonths: this.form.years,
                    gmonths: this.form.years,
                    srate: this.form.rate === '1' ? this.form.baseRate : Number(this.form.rateLpr) / 100,
                    grate: this.form.grandRateShow
                }
                this.$emit('submit', obj, 1)
            }
        },
        ruls() {
            if (!this.form.grand) {
                uni.showToast({
                    title: '请输入公积金贷款金额',
                    icon: 'none'
                })
                return false
            }
            if (!this.form.amount) {
                uni.showToast({
                    title: '请输入商贷贷款金额',
                    icon: 'none'
                })
                return false
            }
            return true
        },
        // lpr
        LprInput(val) {
            console.log(Number(val), 'Lpr')
        },
        //  基点
        pointInput(val) {
            if (this.form.lpr) {
                this.form.rateLpr = (this.form.lpr + Number(val) / 100).toFixed(2)
            } else {
                this.form.rateLpr = (Number(val) / 100).toFixed(2)
            }
        },
        // 计算方式勾选事件
        radioRateChange(val) {
            this.form.rate = val
        },
        // 贷款年限切换事件
        yearBindPickerChange(val) {
            this.yearIndex = val;
            this.form.years = val
        },
        // 公积金基准利率
        grandBindPickerChange(val) {
            this.form.grandRateShow = 0.0325 * val
            this.form.grandRate = (0.0325 * val * 100).toFixed(2)
            this.rateIndex = val;
        },
        // 商贷基准利率
        loanBindPickerChange(val) {
            this.form.baseRate = 0.049 * val
            this.form.rateNum = (0.049 * val * 100).toFixed(2)
            this.loanIndex = val;
        }

    }
}
</script>
